import React, { Component } from 'react';

import MineStyleComp from './MineStyleComp.js'

import { NavLink,withRouter } from 'react-router-dom'

import bscroll from 'better-scroll'

class Mine extends Component {
    constructor(props) {
        super(props);
        this.state = {
            flag:false,
            username:null
        };
    }
    componentDidMount(){
        setTimeout(()=>{
            new bscroll(this.mine,{
                click:true
            })
        },0)
        if(localStorage.getItem('users')){
            const name =JSON.parse(localStorage.getItem('users')).username
            this.setState({
                flag:false,
                username:name
            })
        }else{
            this.setState({
                flag:true
            })
        }
    }
    exit = () => {
        localStorage.clear()
        this.setState({
            flag:true
        })
    }
    back = () => {
        console.log(1)
    }
    render() {
        return ( 
            <MineStyleComp ref = {el => this.mine = el}>
                <div className='mineBox'>
                    <header id='head'>
                        <div onClick={this.back} className='userTop'>
                            <a id='t-goback'>
                                <i  className="fa fa-angle-left" aria-hidden="true"></i>
                            </a>
                            <span className='geren'>个人中心</span>
                            {!this.state.flag && <span className="back" onClick={this.exit}>退出</span>}
                        </div>
                        {this.state.flag && <div className='user-login'>
                            <div style={{width:'1rem'}}></div>
                            <NavLink to='/register' className='zhuce'>注册</NavLink>
                            <i className='i'>|</i>
                            <NavLink to='/login' className='denglu'>登录</NavLink>
                        </div> ||
                        <div className="user-login">
                            <div className="touxiang"></div>
                            <div className="info">
                                {this.state.username && <span className="username">{this.state.username}</span>}
                                <span className="mine">我的账户</span>
                            </div>
                        </div>}
                    </header>
                    <div className='userBox'>
                        <a className='horizontal'>
                            <span className='label-lf'>我的订单</span>
                            <span className='label-rg'>全部订单</span>
                        </a>
                        <ul className='userItem'>
                            <li>
                                <a>
                                    <i className="fa fa-shopping-bag" aria-hidden="true"></i>
                                    <span>待付款</span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <i className="fa fa-user" aria-hidden="true"></i>
                                    <span>待成团</span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <i className="fa fa-truck" aria-hidden="true"></i>
                                    <span>待收货</span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <i className="fa fa-jpy" aria-hidden="true"></i>
                                    <span>退款/售后</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div className='liBox'>
                        <ul className='userItems'>
                            <li>
                                <a className='horizontal'>
                                    <span className='label-lf'>我的优惠券</span>
                                </a>
                            </li>
                            <li>
                                <a className='horizontal'>
                                    <span className='label-lf'>我的收藏</span>
                                </a>
                            </li>
                            <li>
                                <a className='horizontal'>
                                    <span className='label-lf'>我的拼团</span>
                                </a>
                            </li>
                            <li>
                                <a className='horizontal'>
                                    <span className='label-lf'>我的免单券</span>
                                    <span className='label-rg'>0张</span>
                                </a>
                            </li>
                            <li>
                                <a className='horizontal'>
                                    <span className='label-lf'>借钱</span>
                                    <span className='label-rg'>新用户免费领1000元</span>
                                </a>
                            </li>
                        </ul>
                        <ul className='userItems'>
                            <li>
                                <a className='horizontal'>
                                    <span className='label-lf'>客服中心</span>
                                </a>
                            </li>
                            <li>
                                <a className='horizontal'>
                                    <span className='label-lf'>关于卷皮</span>
                                </a>
                            </li>
                        </ul>
                        <ul className='foot'>
                            <li>
                                <a>
                                    <span>返回首页</span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <span>客户端</span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <span>电脑版</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </MineStyleComp>
        );
    }
}

export default withRouter(Mine);